<template>
  <el-container :class="setContainerClass()">
    <el-header>
      <h1 class="float-left text-2xl ">
        {{ t("language.welcome-kylinos-project") }}
      </h1>
    </el-header>
    <el-main>
        <el-page-header
          v-if="isShowBack"
          :content="t('language.create-project')"
          @back="goBack"
        />
        <CreateProjectTrees
          ref="projectRef"
          :projectKey="projectKey"
          @eventCallParentConfirm="setDialogFormVisible(undefined)"
          @eventCallParentCancel="setDialogFormVisible(undefined)"
          @eventCallParentInited="setInited()"
        />
    </el-main>
    <el-footer>
      <!-- Form -->
      <!-- <el-button type="text" @click="setDialogFormVisible(true)"
        >open a Form nested Dialog</el-button
      > -->
    </el-footer>
  </el-container>
</template>

<script>
import { useI18n } from "vue-i18n";
import { defineComponent, reactive, toRefs, ref, onMounted } from "vue";
import { clone } from "@/common/func";
import { keys } from "@/common/define";
import { useRouter } from "vue-router";
import { translate } from "@/common/translate";
import CreateProjectTrees from '@/views/components/CreateProjectTrees';

export default defineComponent({
  name: "CreateProjectPage",
  props: {
    msg: String,
    isShowBack: { type: Boolean, default: true },
  },
  components: {
    CreateProjectTrees,
  },
  setup() {
    // let item = undefined;
    const state = reactive({
      isInit: false,
      dialogFormVisible: false,
      projectKey: keys["KEY-C"],
      isShowButton: true
    });
    onMounted(() => {
      console.log(aboutRef);
    });
    const aboutRef = ref(null);
    const resetForm = () => {
      console.log(aboutRef);
      aboutRef.value.resetForm();
    };
    const { t } = useI18n();
    const router = useRouter();

    const setDialogFormVisible = (is) => {
      state.dialogFormVisible = is;
    };
    const setInited = () => {
      console.log("setInited");
      state.isInit = true;
    }

    // 初始化当前页
    const init = () => {};
    const goBack = () => {
      console.log("go back");
      router.go(-1);
    };
    const setContainerClass = ( ) => {
      return (state.isInit) ? "" : "hidden"
    }
    return {
      t,
      ...toRefs(state),
      setDialogFormVisible,
      aboutRef,
      setInited,
      setContainerClass,
      init,
      goBack
    };
  },
  created() {
    this.init();
  },
  methods: {},
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss">
.el-dialog__header {
  padding: 2px 10px;
}
.el-dialog__headerbtn {
  top: 3px;
}



.el-input__inner {
  height: 30px;
}
.el-button {
  height: 30px;
  min-height: 30px;
  padding: 6px 12px;
}
.el-header,
.el-footer {
  text-align: left;
}

.el-aside {
  text-align: center;
  line-height: 200px;
}

.el-main {
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-row {
  margin-bottom: 20px;
  /* &:last-child {
  margin-bottom: 0;
  } */
}
</style>
